<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素遍历</title>
		<!-- 元素遍历  用于DOM树中遍历元素 【元素嵌套，父子级】
		   children()   功能：获取匹配元素集合中每个元素的子元素
		   parent()     功能：获取匹配元素集合中每个元素的父元素
		   
		   siblings()   功能：获取匹配元素集合中每个元素的所有兄弟元素
		   
		   next()       功能：获取匹配元素集合中每个元素的下一个兄弟元素
		   prev()        功能：获取匹配元素集合中每个元素的上一个兄弟元素
		   
		   each()       功能：遍历匹配元素的集合---所有子元素
		                语法糖：each(function(index,element){
							$(element).text(`${index}`)
							注意：打印遍历的值，不可以使用单双引号+拼接
							功能：获取到的元素，遍历元素内容
						})
						        index：下标    element：元素       形参
		 -->
		 <script src="../js/jquery-1.11.1.js"></script>
		 <style>
			 .container{
				 border: 1px solid red;
				 margin: 10px;
				 padding: 10px;
			 }
			 .box{
				 background-color: #d4fffe;
				 margin: 10px;
				 padding: 10px;
			 }
			 button{
				 margin: 15px;
			 }
		 </style>
	</head>
	<body>
		<!-- html    div.container父级   6个div.box 每个#box1、2、3...子级 
		             6个按钮
			css     .container添加样式 边框1px 内外边距10px
			        .box添加样式     背景色、内外边距10px
					button添加样式   外边距5px
		-->
		<div class="container">
			<div class="box" id="box1">盒子1</div>
			<div class="box" id="box2">盒子2</div>
			<div class="box" id="box3">盒子3</div>
			<div class="box" id="box4">盒子4</div>
			<div class="box" id="box5">盒子5</div>
			<div class="box" id="box6">盒子6</div>
		</div>
		<button id="gc">获取子元素</button>
		<button id="gp">获取父元素</button>
		<button id="gs">获取兄弟元素</button>
		<button id="gn">获取下一个兄弟元素</button>
		<button id="gr">获取上一个兄弟元素</button>
		<button id="loop">遍历元素</button>
		
		<script>
			/*1.点击获取子元素按钮 实现.container下所有子元素添加背景色*/
			$("#gc").click(function(){
				//父找子 函数--添加效果
				$(".container").children().css("background-color","#feffc0");
			});
			/*2.点击获取父元素按钮 实现.container添加背景色*/
			$("#gp").click(function(){
				$(".box").parent().css("background-color","#ffd4e6");
			});
			/*3.点击获取兄弟元素按钮 实现除了#box4字体颜色不变，其他变色*/
			$("#gs").click(function(){
				$("#box4").siblings().css("color","#0000ff");
			});
			/*4.点击获取下一个兄弟元素按钮 实现#box4 下一个兄弟添加背景色*/
			$("#gn").click(function(){
				$("#box4").next().css("background-color","#c5ffbb");
			});
			/*5.点击获取上一个兄弟元素按钮 实现#box6 上一个兄弟添加效果：圆、背景图、背景色、盒子阴影*/
			$("#gr").click(function(){
				$("#box6").prev().css({
					"width":"100px",
					"height":"100px",
					"border-radius":"50%",
					"background-image":"url(../img/1.gif)",
					"background-size":"100% 100%",
					"background-color":"#ffe6f0",
					"box-shadow":"3px 3px 5px 0px #000000",
					"font-size":"0"
				});
			});
			/*6.点击 遍历元素 按钮 实现每个盒子上，这是第几个盒子*/
			$("#loop").click(function(){
				//通过.box 抓到6个元素【一组集合】
				$(".box").each(function(i,e){  //e代表元素  i代表下标
					//每个盒子加文字，这是第几个盒子
					$(e).text(`这是第${i+1}盒子`);
				});
			});
			
		</script>
	</body>
</html>